<template>
    <!-- 4.监听属性 -->
    <div>
        <p>{{num}}</p>
        <button @click="num+=10">+10</button>
        <hr>
        <p>{{num1}}</p>
        <button @click="num1+=20">+20</button>
    </div>
</template>

<script>
export default {
     name:'',
    components: {

    },
    props: {

    },
    data() {
        return {
            num: 10,
            num1:20
        };
    },
    methods: {

    },
    watch: {
        // 表示要监听的数据是num
        // 监听属性第一种格式(函数写法)
        num(newVal,oldVal){
            // 这个函数什么时候执行？ -- num的值一旦变化就会执行
            // 有两个参数
            console.log('num发生变化',newVal,oldVal)
        },
        // 监听属性的第二种格式(对象写法)
        num1:{
            // handler是固定写法函数，当属性改变就会在触发这里的handler方法！
            handler(newVal,oldVal){
                console.log('num1发生变化',newVal,oldVal)
            },
            immediate:true   //页面刷新就开始监听num1，默认是false
        }
    },
    computed: {
        // 一个值如果受其他值影响的话就用 conputed计算属性,  经典的例子就是 购物车算总价
        // 当一个数据变化的的时候需要去做额外操作的时候就用 watch监听， 经典例子是 搜素数据 
    },
    created() {

    },
    mounted() {

    }
};
</script>

<style scoped lang="less">

</style>
